<template>
	<view class="container">
		<!-- 消息提示 -->
		<u-toast ref="uToast" />
		<view style="height: var(--status-bar-height);"></view>
		<!-- 头像背景 -->
		<view class="head">
			<view class="user" @click="login">
				<u--image :src="profilePhotoUrl" width="100" height="100" shape="circle"></u--image>
				<text style="font-weight: bold;color: aliceblue;">{{this.userName}}</text>
			</view>
		</view>
		<!-- 内容模块 -->
		<view class="content">
			<!-- 中间选项 -->
			<view class="tab_control">
				<view class="u-demo-block__content">
					<u-row justify="space-between" gutter="10">
						<u-col span="3">
							<view class="demo-layout" style="text-align: center;">
								<view @click="history"
									style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 45px;width: 45px;" src="/static/img/me/guankanlishi.png">
									</image>
									<text style="font-size: 3vw;">观看历史</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 45px;width: 45px;" src="/static/img/me/appxiazai.png"></image>
									<text style="font-size: 3vw;">app下载</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 45px;width: 45px;" src="/static/img/me/fenxiang.png"></image>
									<text style="font-size: 3vw;">分享</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view @click="web" style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 45px;width: 45px;" src="/static/img/me/lianjie.png"></image>
									<text style="font-size: 3vw;">网页版</text>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<!-- 单元格 -->
			<view class="cell">
				<u-cell-group>
					<u-cell icon="setting" @click="setting" title="设置中心" arrow-direction="down">
					</u-cell>
					<u-cell icon="chat" @click="help" title="帮助反馈" arrow-direction="down">
					</u-cell>
					<u-cell icon="warning-fill" title="侵权处理"></u-cell>
					<u-cell icon="calendar" title="广告合作"></u-cell>
				</u-cell-group>
			</view>

			<!-- 退出按钮 -->
			<view v-if="isLogin" class="logout">
				<view class="u-page__button-item">
					<u-button @click="logout" text="登出" size="normal" type="warning" plain></u-button>
				</view>
			</view>
			<!-- 版本号 -->
			<view class="version">
				<text style="color: darkgrey;">当前版本：{{version}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				isLogin: false,
				version: '',
				userId: '',
				userName: '登录/注册',
				profilePhotoUrl: '/static/img/me/youketouxiang.png'
			}
		},
		onLoad() {},
		onShow() {
			//获取软件版本
			// 获取本地应用资源版本号
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				this.version = info.version;
			})
			//已经登录才从缓存读取数据
			if (getApp().globalData.isLogin) {
				var data;
				//从缓存中获取user
				try {
					var res = uni.getStorageSync('user')
					if (res) {
						data = res
					}
				} catch (e) {
					// error
					console.log(e)
				}

				this.isLogin = getApp().globalData.isLogin;
				this.userId = data.userId;
				this.userName = data.userName;
				this.profilePhotoUrl = data.profilePhotoUrl ? data.profilePhotoUrl :
					"/static/img/me/default.jpg";
			}
		},
		methods: {
			//点击登录事件
			login() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			//点击历史记录
			history() {
				if (!getApp().globalData.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login',
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/history/history',
				})
			},
			//点击跳转网页版
			web(){
				plus.runtime.openURL('https://ikan.wang')
			},
			setting() {
				if (!getApp().globalData.isLogin) {
					this.$refs.uToast.show({
						position: 'top',
						message: '请先登录',
						type: 'error',
					})
				} else {
					uni.navigateTo({
						url: '/pages/setting/setting'
					})
				}
			},
			help() {
				uni.navigateTo({
					url: '/pages/help/help'
				})
			},
			logout() {
				this.userId = '';
				this.userName = '登录/注册';
				this.profilePhotoUrl = "/static/img/me/youketouxiang.png";
				this.isLogin = getApp().globalData.isLogin = false;
				//请求服务器删除token
				http.get('/login/logout', {
					params: {
						token: getApp().globalData.token
					}
				}).then(res => {
					const data = res.data.data;
				}).catch(err => {
					console.log(err)
				})
				getApp().globalData.token = '';
				//清除缓存
				try {
					uni.removeStorageSync('user')
				} catch (e) {
					// error
				}
				try {
					uni.removeStorageSync('token')
				} catch (e) {
					// error
				}
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		text-align: center;
		height: 100%;
	}

	.head {
		width: 100%;
		height: 200px;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url('/static/img/me/beijing.jpg');
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.content {
		width: 95%;
		height: 100%;
		margin: 0 0 10px 10px;
	}

	.tab_control {
		margin-top: 10px;
		border-radius: 10px;
		box-shadow: 0px 0px 5px 2px #d8d8d8;
	}

	.cell {
		margin-top: 10px;
		border-radius: 10px;
		box-shadow: 5px 5px 15px 5px #d8d8d8;
		text-align: left;
	}

	.logout {
		margin-top: 10px;
		box-shadow: 5px 5px 15px 5px #d8d8d8;
	}

	.version {
		text-align: center;
		width: 100%;
		justify-content: center;
		align-items: center;
		/* 吸底 */
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>